<template>
	<el-container style="height: 100%">
		<!-- aside -->
		<el-aside class="app-aside" :width="isCollapse?'64px':'230px'">
			<div class="app-aside-logo">
				<router-link :to="{path: '/'}"><strong>VUE-SPA</strong></router-link>
			</div>
			
			<el-menu router :default-active="$route.path" :collapse="isCollapse" :collapse-transition="false">
				<el-menu-item index="/">
					<i class="el-icon-s-home"></i>
					<span slot="title">首页</span>
				</el-menu-item>
				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-shopping-cart-1"></i>
						<span>永和</span>
					</template>
					<el-menu-item index="/door/list">门店管理</el-menu-item>
					<el-menu-item index="/order/list">订单管理</el-menu-item>
				</el-submenu>
				<el-submenu index="2">
					<template slot="title">
						<i class="el-icon-setting"></i>
						<span>系统</span>
					</template>
					<el-menu-item index="/2-1">部门管理</el-menu-item>
					<el-menu-item index="/2-2">用户管理</el-menu-item>
					<el-menu-item index="/2-3">角色管理</el-menu-item>
					<el-menu-item index="/2-4">权限管理</el-menu-item>
					<el-menu-item index="/2-5">日志管理</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>

		<el-container>
			<!-- header -->
			<el-header class="app-header">
				<!-- aside toggle -->
				<a class="app-aside-toggle" @click="isCollapse=!isCollapse">
					<i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
				</a>

				<div style="float: right">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
							dandan<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>个人资料</el-dropdown-item>
							<el-dropdown-item>修改密码</el-dropdown-item>
							<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-header>

			<!-- main -->
			<el-main>
				<router-view :key="key" />
			</el-main>

			<!-- footer -->
			<el-footer class="app-footer hidden-xs-only">
				Copyright &copy; 2020 Footer
			</el-footer>
		</el-container>
	</el-container>
</template>

<script>
	export default {
		name: 'Index',
		data() {
			return {
				isCollapse: false
			};
		},
		methods: {
			logout() {
				sessionStorage.removeItem('token')
				this.$router.push({path: '/login'})
			}
		},
		computed: {
			key() {
				return this.$route.path
			}
		}
	}
</script>

<style scoped>
	.app-aside {
		background-color: #fff;
		-webkit-box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
		box-shadow: 0px 8px 17px rgba(0, 0, 0, 0.2);
	}

	.app-aside-logo {
		padding: 0 15px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		color: #fff;
		background-color: #3ba0f4;
		overflow: hidden;
	}
	
	.app-aside-logo:hover {
		color: #ecf5ff;
	}

	.app-aside .el-menu {
		border-right: none;
	}

	.app-aside-toggle {
		font-size: 21px;
		color: #fff;
		cursor: pointer;
	}

	.app-aside-toggle:hover {
		color: #ecf5ff;
	}
	
	.app-header {
		line-height: 60px;
		color: #fff;
		background-color: #0696f5
	}

	.el-dropdown-link {
		cursor: pointer;
		color: #fff;
	}

	.el-dropdown-link:hover {
		color: #ecf5ff;
	}

	.el-icon-arrow-down {
		font-size: 12px;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.el-dropdown-link:focus .el-icon-arrow-down {
		transform: rotate(180deg);
	}

	.app-footer {
		line-height: 60px;
		border-top: solid 1px #e6e6e6
	}
</style>
